<template>

  <div
    :class="className"
    :style="{height:height,width:width}"
    style="min-widht: 1200px;"
  />

</template>

<script>
import echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import resize from "./mixins/resize";

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "350px",
    },
    autoResize: {
      type: Boolean,
      default: true,
    },
    chartData: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      chart: null,
      weatherIconDic:
        "{ ‘晴’: ‘a00’, ‘多云’: ‘a01’, ‘阴’: ‘a02’, ‘阵雨’: ‘a03’, ‘雷阵雨’: ‘a04’, ‘冰雹’: ‘a05’, ‘雨夹雪’: ‘a06’, ‘小雨’: ‘a07’, ‘中雨’: ‘a08’, ‘大雨’: ‘a09’, ‘暴雨’: ‘a10’, ‘大暴雨’: ‘a11’, ‘特大暴雨’: ‘a12’, ‘阵雪’: ‘a13’, ‘小雪’: ‘a14’, ‘中雪’: ‘a15’, ‘大雪’: ‘a16’, ‘暴雪’: ‘a17’, ‘雾’: ‘a18’, ‘冻雨’: ‘a19’, ‘沙尘暴’: ‘a20’, ‘小到中雨’: ‘a21’, ‘中雨-大雨’: ‘a22’, ‘大雨-暴雨’: ‘a23’, ‘暴雨-大暴雨’: ‘a24’, ‘大暴雨-特大暴雨’: ‘a25’, ‘小雪-中雪’: ‘a26’, ‘中雪-大雪’: ‘a27’, ‘大雪-暴雪’: ‘a28’, ‘浮尘’: ‘a29’, ‘扬沙’: ‘a30’, ‘强沙尘暴’: ‘a31’ }",
    };
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.setOptions(val);
      },
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart();
    });
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart() {
      // console.log(this.$el);
      this.chart = echarts.init(this.$el, "macarons");
      this.setOptions(this.chartData);
    },
    setOptions({ expectedData, actualData } = {}) {
      this.chart.setOption({
        grid: {
          left: 10,
          right: 20,
          bottom: 10,
          top: 140,
          containLabel: true,
          show: true,
          backgroundColor: "transparent",
          opacity: 0.3,
          borderWidth: 0,
        },
        tooltip: {
          trigger: "axis",
          // axisPointer: {
          //   type: "cross",
          // },
          // padding: [5, 10],
        },
        legend: {
          // data: ["expected", "actual"],
          show: false,
        },

        xAxis: [
          // x轴 日期
          {
            type: "category",
            boundaryGap: false,

            position: "top",
            offset: 130,
            zlevel: 100,
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              interval: 0,
              formatter: ["{a|{value}}"].join("\n"),
              rich: {
                a: {
                  // color: "white",
                  fontSize: 18,
                },
              },
            },
            nameTextStyle: {},
            data: ["11日", "12日", "13日", "14日", "15日", "16日", "17日"],
          },
          // x轴 星期
          {
            type: "category",
            boundaryGap: false,

            position: "top",
            offset: 110,
            zlevel: 100,
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              interval: 0,
              formatter: ["{a|{value}}"].join("\n"),
              rich: {
                a: {
                  fontSize: 18,
                  // color: "white",
                },
              },
            },
            nameTextStyle: {},
            data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
          },
          // x轴 天气图标
          {
            type: "category",
            boundaryGap: false,
            position: "top",
            offset: 40,
            zlevel: 100,
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },

            axisLabel: {
              interval: 0,
              formatter: function (value, index) {
                return "{" + index + "| }\n{b|" + value + "}";
              },
              rich: {
                0: {
                  backgroundColor: {
                    // image: require('@/assets/weather_icon/' + this.weatherIconDic[this.weatherdata.weather[0]] + '.png')
                    image: "https://d.scggqx.com/forecast/img/小雨.png",
                  },
                  height: 40,
                  width: 40,
                },
                1: {
                  backgroundColor: {
                    // image: require('@/assets/weather_icon/' + this.weatherIconDic[this.weatherdata.weather[1]] + '.png')
                    image: "https://d.scggqx.com/forecast/img/小雨.png",
                  },
                  height: 40,
                  width: 40,
                },
                2: {
                  backgroundColor: {
                    // image: require('@/assets/weather_icon/' + this.weatherIconDic[this.weatherdata.weather[2]] + '.png')
                    image: "https://d.scggqx.com/forecast/img/阴.png",
                  },
                  height: 40,
                  width: 40,
                },
                3: {
                  backgroundColor: {
                    // image: require('@/assets/weather_icon/' + this.weatherIconDic[this.weatherdata.weather[3]] + '.png')
                    image: "https://d.scggqx.com/forecast/img/小雨.png",
                  },
                  height: 40,
                  width: 40,
                },
                4: {
                  backgroundColor: {
                    // image: require('@/assets/weather_icon/' + this.weatherIconDic[this.weatherdata.weather[4]] + '.png')
                    image: "https://d.scggqx.com/forecast/img/多云.png",
                  },
                  height: 40,
                  width: 40,
                },
                5: {
                  backgroundColor: {
                    // image: require('@/assets/weather_icon/' + this.weatherIconDic[this.weatherdata.weather[5]] + '.png')
                    image: "https://d.scggqx.com/forecast/img/小雨.png",
                  },
                  height: 40,
                  width: 40,
                },
                6: {
                  backgroundColor: {
                    // image: require('@/assets/weather_icon/' + this.weatherIconDic[this.weatherdata.weather[6]] + '.png')
                    image: "https://d.scggqx.com/forecast/img/小雨.png",
                  },
                  height: 40,
                  width: 40,
                },
                b: {
                  // color: "white",
                  fontSize: 12,
                  lineHeight: 30,
                  height: 20,
                },
              },
            },
            nameTextStyle: {
              fontWeight: "bold",
              fontSize: 19,
            },
            data: ["小雨", "小雨", "阴", "小雨", "多云", "小雨", "小雨"],
          },
        ],
        // y轴 数值
        yAxis: {
          type: "value",
          show: false,
          axisLabel: {
            formater: "{value} ℃",
            // color: "white",
          },
          axisTick: {
            show: false,
          },
        },

        series: [
          {
            name: "最高气温",
            type: "line",
            symbol: "emptyCircle",
            symbolSize: 10,
            showSymbol: true,
            smooth: true,
            itemStyle: {
              normal: {
                color: "#C95843",
                // lineStyle: {
                //   color: "#FF005A",
                //   width: 2,
                // },
              },
            },
            label: {
              show: true,
              position: "top",
              formatter: "{c}℃",
              // color: "white",
            },
            lineStyle: {
              width: 1,
            },
            areaStyle: {
              opacity: 1,
              color: "transparent",
            },
            data: ["16.3", "14.3", "18.3", "19.3", "15.3", "14.3", "16.8"],
            animationDuration: 2800,
            animationEasing: "cubicInOut",
          },
          {
            name: "最低气温",
            type: "line",
            symbol: "emptyCircle",
            symbolSize: 10,
            showSymbol: true,
            smooth: true,
            itemStyle: {
              normal: {
                color: "blue",
                // lineStyle: {
                //   color: "#FF005A",
                //   width: 2,
                // },
              },
            },
            label: {
              show: true,
              position: "bottom",
              formatter: "{c}℃",
              // color: "white",
            },
            lineStyle: {
              width: 1,
            },
            areaStyle: {
              opacity: 1,
              color: "transparent",
            },
            data: ["13.4", "12.8", "13.5", "12.5", "12.7", "13.2", "13.0"],
            // animationDuration: 2800,
            // animationEasing: "cubicInOut",
          },
        ],
      });
    },
  },
};
</script>
